<template>
  <view class="list-item" @click="gotoDetail">
    <view class="good-banner">
      <image class="good-banner" :src="good.pic_url" mode="widthFix" />
      <goodsSaleNo :imgWidth="'247.8rpx'" :goodsInfo="good" :imgMode="'widthFix'"></goodsSaleNo>
    </view>

    <view class="goods-info">
      <view class="goods-name">{{ good.name }}</view>
      <view class="goods-price">
        <view class="price">
          <text>￥</text>
          <text>{{ good.price | priceBeforeZero }}</text>
          <text>{{ good.price | priceAfterZero }}</text>
        </view>
      </view>
      <view class="good-evaluate">
        <text>{{ good.comment }}{{$t('search.evaluation')}}</text>
        <text>{{ good.rank_good_percent }}{{$t('goods.good')}}</text>
      </view>
      <view class="good-sale">{{$t('goods.count')}}：{{ good.sales }}</view>
    </view>
    <!-- <view class="add-car" @click.stop="addCart" v-if="good.product_type == 0">
      <image :src="asyncImgs.images.add_car_icon" mode="aspectFit" />
    </view> -->
  </view>
</template>

<script>
import goodsSaleNo from "@/components/goodsSaleNo/index.vue";

export default {
  props: {
    good: {
      type: Object,
      default: {},
    },
  },
  components: {
    goodsSaleNo,
  },
  data() {
    return {};
  },
  created() {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.lenhth);
    },
  },
  computed: {},
  methods: {
    gotoDetail() {
      this.$utils.toUrl("/goods/goods/goods?id=" + this.good.id);
    },
    addCart() {
      uni.$emit("searchAddGoods", this.good);
    },
  },
};
</script>

<style scoped lang="scss">
.list-item {
  width: 354rpx;
  // height: 633rpx;
  margin: 0 10rpx 10rpx 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #ffffff;
  border-radius: 16rpx;
  float: left;
  padding-bottom: 12rpx;

  .good-banner {
    width: 354rpx;
    // height: 354rpx;
    background: #ececec;
    border-radius: 16rpx 16rpx 0 0;
    display: block;
    position: relative;
    .banner {
      width: 354rpx;
      background: #ececec;
      border-radius: 16rpx 16rpx 0 0;
      display: block;
    }
  }

  .goods-info {
    margin: 14rpx auto 0;
    width: 89.83%;

    .goods-name {
      max-width: 322rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #262626;
      line-height: 40rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .goods-price {
      max-width: 322rpx;
      line-height: 40rpx;
      margin-top: 20rpx;

      .price {
        max-width: 322rpx;
        display: flex;
        align-items: baseline;
        color: #fa2c19;
        font-weight: 500;

        text:nth-child(1) {
          font-size: 24rpx;
        }
        text:nth-child(2) {
          font-size: 36rpx;
        }
        text:nth-child(3) {
          font-size: 24rpx;
        }
      }
    }

    .good-evaluate {
      max-width: 322rpx;
      margin-top: 10rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #888888;
      line-height: 40rpx;

      text:last-child {
        margin-left: 13rpx;
      }
    }
    .good-sale {
      max-width: 322rpx;
      margin-top: 8rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #888888;
      line-height: 40rpx;
    }
  }

  .add-car {
    width: 52rpx;
    height: 52rpx;
    background: #f2f2f2;
    border-radius: 26rpx;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 24rpx;
      height: 24rpx;
      display: block;
    }
  }
}
</style>
